<template>
    <div>
        <input type="text" placeholder="请输入关键词" v-model="keyword" >
        <input type="button" value="搜索" @click="btnfilter()">
        <input type="button" value="新增" @click="btnadd()">
    </div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>书名</th>
                <th>作者</th>
                <th>操作</th>
            </tr>
        </thead>
            <tr v-for="item in arr">
                <td>{{item.id}}</td>
                <td>{{item.bookname}}</td>
                <td>{{item.author}}</td>
                <td>
                    <input type="button" value="编辑" @click="btnedit(item.id)">
                    <input type="button" value="删除" @click="btndel(item.id)">
                </td>
            </tr>    
        <tbody>
        </tbody>
    </table>
</template>
<script setup>
import { ref,onMounted } from 'vue';
import { getAll ,delItem} from '@/api/bookApi';
import { useRouter } from 'vue-router';

let router=useRouter()

let keyword=ref()
let arr=ref()

// 生命周期函数，页面的第一次渲染
onMounted(async ()=>{
    let resalut=await getAll()
    arr.value=resalut.data  
})
async function btnadd() {
    router.push('/bookadd')
}
async function btnedit(id) {
    router.push(`/bookedit/${id}`)
}
// 删除
async function btndel(id){
    let resalut=await delItem(id)
    console.log(resalut);    
    if(resalut.code===1000){
        let index=arr.value.findIndex(item=>item.id==id)
        arr.value.splice(index,1)
    }
}
// 过滤
async function btnfilter(){
    let trimkeyword=keyword.value.trim()
    console.log(trimkeyword);
    let resalut=await getAll(trimkeyword)
    arr.value=resalut.data        
}


</script>